<template>
  <div class="user-manage">
    <!-- 拼团种类 -->
    <div class="new-group-bargaining">
      <a-row :gutter="16">
        <a-col
          :span="6"
          v-for="(item, index) in tabs"
          :key="index">
          <permission :authority="item.authority">
            <a-card>
              <p class="title">{{ item.title }}</p>
              <p class="tips">{{ item.des }}</p>
              <a-button
              type="primary"
              icon="plus" @click="editInfo(item.key)">立即新建</a-button>
            </a-card>
          </permission>
        </a-col>
      </a-row>
    </div>
    <!-- tab切换 -->
    <a-tabs type="card" :activeKey="activeKey" @change="tabsChange">
      <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.name">
        <groupBargainingTable :tab="item.key" :curTab="activeKey"></groupBargainingTable>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import groupBargainingTable from './components/groupBargainingTable';
export default {
  name: 'MarketingGroupBargaining',
  components: {
    groupBargainingTable
  },
  data() {
    return {
      activeKey: '1', // 当前活动tab
      tabs: [ // 拼团种类集合
        { name: '普通拼团', key: '1', authority: 'group:activity:add:general', title: '普通拼团', des: '用户下单开团后，邀请好友拼团，以优惠价格购买，提升店铺转化' },
        { name: '规则拼团', key: '2', authority: 'group:activity:add:inerratic', title: '规则拼团', des: '人数越多价格越低，用低价刺激用户发起拉人更多的拼团，高效裂变' }
      ]
    };
  },
  computed: {
    type() { // 返回本页携带的活跃tab
      return this.$route.query.type || '1';
    },
  },
  watch: {},
  created() {
    this.activeKey = this.type || '1'
  },
  mounted() {},
  methods: {
    // 新建拼团活动
    editInfo(key) {
      this.$router.push({
        name:'MarketingGroupBargainingPagesForm',
        query: {
          handle: 'add',
          type: key
        }
      })
    },
    // tab切换
    tabsChange(val) {
      this.activeKey = val
    }
  }
};
</script>

<style lang="less" scoped>
.new-group-bargaining{
  margin-bottom: 20px;
  text-align: center;
  padding: 10px 8px;
  background: #eee;
  border-radius: 8px;
  .title{
    font-size: 20px;
    color: #333;
  }
  .tips{
    font-size: 14px;
    color: #999;
    margin: 5px 0;
  }
}
</style>
